/**
 * 上下联动图
 * LinkageChartsC (reactCharts)
 * @author zxy
 * @date  2020-11-30
 */
import React from 'react';
import { FirstHeaderC, SecondHeaderC, PrimaryC, LinkageChartsC } from '../../comps';
import { Row, Col, Button } from 'antd';

class LinkageChartsCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xAxis1: [
        '2016-03-29',
        '2016-03-30',
        '2016-03-31',
        '2016-04-01',
        '2016-04-04',
        '2016-04-05',
        '2016-04-06',
        '2016-04-07',
        '2016-04-08',
        '2016-04-11',
        '2016-04-12',
        '2016-04-13',
        '2016-04-14',
        '2016-04-15',
      ],
      yAxis1: [
        { name: '单位%', gridIndex: 0 },
        { name: '单位%', gridIndex: 1 },
      ],
      series1: [
        {
          name: '组合',
          type: 'line',
          data: [20, 30, 40, 50, 40, 23, 15, 20, 30, 40, 50, 40, 23, 15],
          xAxisIndex: 0,
          yAxisIndex: 0,
        },
        {
          name: '基准',
          type: 'line',
          data: [20, 20, 30, 60, 30, 23, 30, 20, 20, 30, 60, 30, 23, 30],
          xAxisIndex: 0,
          yAxisIndex: 0,
        },
        {
          name: '超额',
          type: 'area',
          data: [0, 10, 10, -10, 10, 0, -15, 0, 10, 10, -10, 10, 0, -15],
          xAxisIndex: 1,
          yAxisIndex: 1,
          debtAndProfit: true,
        },
      ],
      xAxis2: undefined,
      yAxis2: undefined,
      series2: undefined,
    };

    setTimeout(() => {
      this.setState({
        xAxis2: [
          '2016-03-29',
          '2016-03-30',
          '2016-03-31',
          '2016-04-01',
          '2016-04-04',
          '2016-04-05',
          '2016-04-06',
          '2016-04-07',
          '2016-04-08',
          '2016-04-11',
          '2016-04-12',
          '2016-04-13',
          '2016-04-14',
          '2016-04-15',
        ],
        yAxis2: [
          { name: '单位%', gridIndex: 0 },
          { name: '单位%', gridIndex: 1 },
        ],
        series2: [
          {
            name: '组合',
            type: 'line',
            data: [20, 30, 40, 50, 40, 23, 15, 20, 30, 40, 50, 40, 23, 15],
            xAxisIndex: 0,
            yAxisIndex: 0,
          },
          {
            name: '基准',
            type: 'line',
            data: [20, 20, 30, 60, 30, 23, 30, 20, 20, 30, 60, 30, 23, 30],
            xAxisIndex: 0,
            yAxisIndex: 0,
          },
          {
            name: '超额',
            type: 'area',
            data: [0, 10, 10, -10, 10, 0, -15, 0, 10, 10, -10, 10, 0, -15],
            xAxisIndex: 1,
            yAxisIndex: 1,
            debtAndProfit: true,
          },
        ],
      });
    }, 3000);
  }

  render() {
    return (
      <div>
        <FirstHeaderC title='上下联动图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='同步加载数据' />
            <LinkageChartsC
              xAxis={this.state.xAxis1}
              series={this.state.series1}
              yAxis={this.state.yAxis1}
              height='600px'
              dataZoom={true}
              toolTipDataFormat={[(value) => value + '%', (value) => value + '%', (value) => value + '%']}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='异步加载数据' />
            <LinkageChartsC
              xAxis={this.state.xAxis2}
              series={this.state.series2}
              yAxis={this.state.yAxis2}
              height='600px'
              dataZoom={true}
              toolTipDataFormat={[(value) => value + '%', (value) => value + '%', (value) => value + '%']}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default LinkageChartsCDemo;
